<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ball{width: 100px;height: 100px;background-color: red;border: 2px solid blue;position: fixed;border-radius: 50%;}
    </style>
</head>
<body>
    <div id="ball" style="top: 0;left: 0;" class="ball"></div>
    <script>
        var speed = 10;
        document.onkeydown=function(e){
            // console.log(e.keyCode);
            switch(e.keyCode){
                case 37://left
                    var left = parseInt(ball.style.left)
                    ball.style.left = left - speed + 'px';
                    break;
                case 38://up
                    // console.log(ball.style.top);
                    var top = parseInt(ball.style.top)
                    ball.style.top = top - speed + 'px';
                    break;
                case 39://right
                    var left = parseInt(ball.style.left)
                    ball.style.left = left + speed + 'px';
                    break;

                case 40://down
                    // console.log(ball.style.top);
                    var top = parseInt(ball.style.top)
                    ball.style.top = top + speed + 'px';
                    break;
            }
        }
    </script>
</body>
</html>